<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页图标链接 -->
    <link rel="icon" type="image/x-icon" href="../img/xiaomi.ico">
    <!-- 字体图标链接 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4685170_a027xd036yc.css">
    <title>小米商城-Xiaomi</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        font: 20px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    }
    .wrapper{
        background: url(../img/Xiaomi.PNG) no-repeat center center;
        background-size: cover;
        width: 100%;
        height: 100vh;
    }
    .box1{
        width: 5%;
        height: 60%;
        background-color: skyblue;
        position: absolute;
        bottom: 20%;
        right: 0;
    }
    .box1 .phone{
        width: 100%;
        min-height: 60px;
        background-color: floralwhite;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 10px;

    }
    .box1 .phone img{
        width: 40px;
        height: 40px;
        margin-bottom: 5px
    }
    /* .box1 .user{
        width: 100%;
        min-height: 60px;
        background-color: rgb(184, 40, 64);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 10px;

    } */
    .dh{
        width: 234px;
        height: 460px;
        background-color: rgb(105,101,101,.6);
        position: absolute;
        top: 88px;
        left: 30px;
        color:#fff;
        

    }
    .dh li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 30px;
        padding-right: 20px;
        

    }
    .dh ul {
        list-style: none;
        padding: 20px;
    }
    .dh ul li i {
        font-family: 'iconfont';
        
    }
    
</style>
<body>
    <div class="wrapper">
        <div class="box1">
            <div class="phone">
                <a href="#"><img src="../img/手机.png" /></a>
                <p>手机APP</p>
            </div>
            <div class="user">
                <img src="../img/user.png_" />
                <p>个人中心</p>
            </div>
            <div class="shouhou">
                <img src="../img/tool.png" />
                <p>售后服务</p>
            </div>
            <div class="kefu">
                <img src="../img/客服.png" />
                <p>人工客服</p>
            </div>
            <div class="cart">
                <img src="../img/购物车.png" />
                <p>购物车</p>
            </div>

        </div>
        <div class="dh">
            <ul>
                <li>
                    <a href="#">
                        手机
                    </a>
                    <i class="icon-ico-right-arrow"></i>
                </li>

            </ul>

        </div>
    </div>
    
</body>
</html>